import React, {useRef} from "react";
import ProForm, {FormInstance, ProFormSelect, ProFormText} from "@ant-design/pro-form"
import {Button, Form, Input, ModalProps} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {ModalPermission} from "@/components/Permission";
import interfaceService from "@/services/interface";
import {InterfaceDTO, InterfaceVO} from "@/types/interface";

interface InterfaceFormProps{
  entity?:InterfaceVO;
  onFinish?: (formData:any) => Promise<any | void>;
  /** @name 用于触发抽屉打开的 dom */
  trigger?: JSX.Element;
  /** @name 获取真正的可以获得值的 from */
  formRef?: React.MutableRefObject<(FormInstance & {
    getFieldsFormatValue?: () => any;
  }) | undefined>;
  onReset:()=>void;
  functionKey?:string;
  /** @name 打开关闭的事件 */
  onVisibleChange?: (visible: boolean) => void;
  /** @name 受控的打开关闭 */
  visible?: ModalProps['visible'];
}

const create= async (params:InterfaceDTO): Promise<InterfaceVO> => {
  const response=await interfaceService.create(params);
  const {data}=response;
  return new Promise((resolve, reject) => {
    resolve(data);
  })
}

const modify= async (params:InterfaceDTO): Promise<InterfaceVO> => {
  const response=await interfaceService.modify(params);
  const {data}=response;
  return new Promise((resolve, reject) => {
    resolve(data);
  })
}

const InterfaceForm:React.FC<InterfaceFormProps> = (props) =>{

  const formRef = useRef<FormInstance>();

  const onFinish=async (values:any) => {
    return new Promise<boolean|void>((resolve, reject)=>{
      if(props.onFinish){
        props.onFinish(values)
          .then((data)=>{
            if(data){
              resolve(true);
              formRef.current?.resetFields();
              props.onReset();
            }else{
              reject();
            }
          });
      }
    })
  }


  return (
    <ModalPermission
      formRef={formRef}
      functionKey={props.functionKey}
      visible={props.visible}
      onVisibleChange={props.onVisibleChange}
      trigger={props.trigger}
      onFinish={onFinish}
      initialValues={{
        id:props.entity?.id,
        name:props.entity?.name,
        type:props.entity?.type,
        path:props.entity?.path,
        method:props.entity?.method,
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="md"
          name={'name'}
          label="接口名称"
          rules={[
            {required:true,message:'请输入接口名称'}
          ]}
          placeholder="请输入接口名称"
        />
        <ProFormText
          width="md"
          name={'path'}
          label={'接口路径'}
          rules={[
            {required:true,message:'请输入接口路径'}
          ]}
          placeholder="请输入接口路径"
        />
        <ProFormSelect
          width="md"
          name={'method'}
          label="接口方法"
          rules={[
            {required:true,message:'请选择接口方法'}
          ]}
          options={[
            {value: 'GET',label: 'GET'},
            {value: 'POST',label: 'POST'},
            {value: 'PUT',label: 'PUT'},
            {value: 'DELETE',label: 'DELETE'},
          ]}
          placeholder="请选择接口方法"
        />
        <ProFormSelect
          width="md"
          name={'type'}
          label="接口类型"
          rules={[
            {required:true,message:'请选择接口类型'}
          ]}
          options={[
            {value: 'PUBLIC',label: '公开访问'},
            {value: 'PRIVATE',label: '授权访问'},
            {value: 'AUTHENTICATED',label: '认证访问'},
            {value: 'API',label: 'API访问'},
          ]}
          placeholder="请选择接口类型"
        />
        <Form.Item name="id">
          <Input type={'hidden'} />
        </Form.Item>
      </ProForm.Group>
    </ModalPermission>
  )
}

export const InterfaceCreateForm:React.FC<InterfaceFormProps> = (props) =>{
  const formRef = useRef<FormInstance>();

  const onClick=async ()=>{
    formRef.current?.setFieldsValue({
      id:props.entity?.id,
      name:props.entity?.name,
      type:props.entity?.type,
      path:props.entity?.path,
      method:props.entity?.method,
    })
  }

  return (
    <InterfaceForm
      {...props}
      formRef={formRef}
      onFinish={create}
      trigger={
        <Button type="primary" onClick={onClick}>
          <PlusOutlined />
          新增接口
        </Button>
      }
    />
  )
}

export const InterfaceModifyForm:React.FC<InterfaceFormProps> = (props) =>{
  const formRef = useRef<FormInstance>();

  const onVisibleChange=async (visible: boolean)=>{
    if(visible){
      formRef.current?.setFieldsValue({
        id:props.entity?.id,
        name:props.entity?.name,
        type:props.entity?.type,
        path:props.entity?.path,
        method:props.entity?.method,
      })
    }
    if(props.onVisibleChange && !visible){
      props.onVisibleChange(visible);
    }
  }

  return (
    <InterfaceForm
      {...props}
      formRef={formRef}
      onFinish={modify}
      onVisibleChange={onVisibleChange}
    />
  )
}

